<template>
  <div class="no-scrollbar scroll-x">
    <div class="file-list">
      <template  v-for="(fileItem,index) in certList" :key="index">
        <div class="file-item">
          <span>{{
            fileItem["pm_name"] || getFileNameFromUrl(fileItem["file"])
          }}</span>
          <IconDownload2
            @click="downloadFileBtn(fileItem['file'])"
            class="svg-icon"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import {
  postExamCertList,
} from "../../../../../../api/profile";

type Props = {
  course_id: number;
};
// 获取文件名称
function getFileNameFromUrl(url: string) {
  // 创建一个 URL 对象
  const urlObj = new URL(url);

  // 获取路径部分（pathname）
  const pathname = urlObj.pathname;

  // 使用正则表达式提取文件名
  const fileName = pathname.split("/").pop();

  return fileName;
}
const props = defineProps<Props>();

const certList = ref([]);
const getCertList = async () => {
  let id = props.course_id;
  let res = await postExamCertList(id);
  certList.value = res.data;
};

const fileName = computed(() => {
  return (url) => {
    let file = url.split("/").pop();
    return file;
  };
});

const fileType = computed(() => {
  return (url) => {
    let file = url.split("/").pop();
    let ext = file.split(".").pop();
    return ext;
  };
});

const downloadFileBtn = async (item) => {
  let href = URL.createObjectURL(new Blob([item.pm_imgurl]));
  let a = document.createElement("a");
  a.href = href; //不可用
  a.href = item.pm_imgurl;
  a.target = "_blank";
  a.download = fileName.value(item.pm_imgurl);
  a.click();
  window.URL.revokeObjectURL(href);
};

watch(
  () => props.course_id,
  () => {
    getCertList();
  },
  { immediate: true }
);
</script>
<style scoped lang="less">
.file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  gap: 15px;
  font-size: 16px;
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px; /* 内边距 */
  background-color: #ffffff; /* 文件项背景颜色 */
  border-radius: 4px; /* 文件项圆角 */
  transition: all 0.2s; /* 动画效果 */
  span {
    word-break: break-all;
  }
}

.file-item:hover {
  transform: scale(1.03); /* 悬停时放大效果 */
}

.svg-icon {
  margin-left: 8px; /* 图标与文本之间的间距 */
  fill: #007bff; /* 图标颜色 */
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .file-list {
    padding: 80px 60px;
    font-size: 72px;
    min-width: 200%;
    gap: 60px;
    .file-item {
      padding: 42px;
      border-radius: 20px;
      .svg-icon {
        margin-left: 40px;
      }
    }
  }
}
</style>
